<template>
  <div class="home">
    <div class="home-top">
      <div class="home-top-left">
        <span>
          <a-card title="今日销售量" style="width: 300px" size="small">
            <a slot="extra" href="#">更多</a>
            <p>线上成交：588单</p>
            <p>线下成交：200单</p>
            <p>比昨日增长30%</p>
          </a-card>
        </span>
        <span :style="{marginLeft: '30px'}">
          <a-card title="累计销售量" style="width: 300px" size="small">
            <a slot="extra" href="#">更多</a>
            <p>上月成交量：12588单</p>
            <p>本月成交量：66200单</p>
            <p>比上月增长40%</p>
          </a-card>
        </span>
      </div>
      <div class="home-top-right">
        <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
          <v-tooltip />
          <v-axis data-key="type" :label="label" :tickLine="tickLine"></v-axis>
          <v-axis data-key="value" :label="labelFormat" :title="title"></v-axis>
          <v-interval position="type*value" color="cat" :opcaity="1"></v-interval>
          <v-guide
            type="text"
            :top="true"
            :position="pos1"
            content="家具"
            :style="style"
            :offsetY="40"
          />
          <v-guide
            type="text"
            :top="true"
            :position="pos2"
            content="技术"
            :style="style"
            :offsetY="40"
          />
          <v-guide
            type="text"
            :top="true"
            :position="pos3"
            content="办公用品"
            :style="style"
            :offsetY="40"
            :offsetX="20"
          />
          <v-guide type="line" :start="start1" :end="end1" :lineStyle="lineStyle" />
          <v-guide type="line" :start="start2" :end="end2" :lineStyle="lineStyle" />
        </v-chart>
      </div>
    </div>
    <div class="home-bottom">
      <div class="home-bottom-left">
        <v-chart
          :forceFit="true"
          :height="400"
          :data="data1"
          :padding="[0, 90, 20, 52]"
          :scale="scale1"
        >
          <v-tooltip />
          <v-axis data-key="city" :label="label1" :tickLine="tickLine1" />
          <v-axis data-key="value" :label="label1" :title="title1" />
          <v-legend position="right-bottom"></v-legend>
          <v-coord direction="LB" type="rect" />
          <v-interval position="city*value" :opacity="1" :adjust="adjust1" color="type" />
        </v-chart>
      </div>
      <div class="home-bottom-right">
        <a-card hoverable style="width: 300px">
          <img
            slot="cover"
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
          />
          <template slot="actions" class="ant-card-actions">
            <a-icon key="setting" type="setting" />
            <a-icon key="edit" type="edit" />
            <a-icon key="ellipsis" type="ellipsis" />
          </template>
          <a-card-meta title="Card title" description="This is the description">
            <a-avatar
              slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-card-meta>
        </a-card>
        <a-card hoverable style="width: 300px">
          <img
            slot="cover"
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
          />
          <template slot="actions" class="ant-card-actions">
            <a-icon key="setting" type="setting" />
            <a-icon key="edit" type="edit" />
            <a-icon key="ellipsis" type="ellipsis" />
          </template>
          <a-card-meta title="Card title" description="This is the description">
            <a-avatar
              slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-card-meta>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
const data = [{
  type: '书架',
  value: 48000,
  cat: '家具'
}, {
  type: '椅子',
  value: 36000,
  cat: '家具'
}, {
  type: '桌子',
  value: 9000,
  cat: '家具'
}, {
  type: '复印机',
  value: 30500,
  cat: '技术'
}, {
  type: '电话',
  value: 22000,
  cat: '技术'
}, {
  type: '配件',
  value: 12000,
  cat: '技术'
}, {
  type: '纸张',
  value: 25000,
  cat: '办公用品'
}, {
  type: '笔',
  value: 17000,
  cat: '办公用品'
}, {
  type: '美术',
  value: 8000,
  cat: '办公用品'
}, {
  type: '收纳',
  value: 2000,
  cat: '办公用品'
}];

const scale = [{
  dataKey: 'value',
  alias: '占比（%）'
}];

const label = {
  textStyle: {
    fill: '#aaaaaa'
  }
}

const tickLine = {
  alignWithLabel: false,
  length: 0
}

const labelFormat = {
  textStyle: {
    fill: '#aaaaaa'
  },
  formatter: function formatter (text) {
    return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
  }
}

const title = {
  offset: 70
}

const lineStyle = {
  stroke: '#d9d9d9',
  lineDash: [0, 0]
}

const style = {
  fill: '#c0c0c0',
  fontSize: 12,
  fontWeight: '300',
  textAlign: 'center'
}

const data1 = [{
  city: '石家庄',
  type: '水果',
  value: 14500
}, {
  city: '石家庄',
  type: '米面',
  value: 8500
}, {
  city: '石家庄',
  type: '特产零食',
  value: 10000
}, {
  city: '石家庄',
  type: '茶叶',
  value: 7000
}, {
  city: '深圳',
  type: '水果',
  value: 9000
}, {
  city: '深圳',
  type: '米面',
  value: 8500
}, {
  city: '深圳',
  type: '特产零食',
  value: 11000
}, {
  city: '深圳',
  type: '茶叶',
  value: 6000
}, {
  city: '温州',
  type: '水果',
  value: 16000
}, {
  city: '温州',
  type: '米面',
  value: 5000
}, {
  city: '温州',
  type: '特产零食',
  value: 6000
}, {
  city: '温州',
  type: '茶叶',
  value: 10000
}, {
  city: '宁波',
  type: '水果',
  value: 14000
}, {
  city: '宁波',
  type: '米面',
  value: 9000
}, {
  city: '宁波',
  type: '特产零食',
  value: 10000
}, {
  city: '宁波',
  type: '茶叶',
  value: 9000
}, {
  city: '无锡',
  type: '水果',
  value: 14000
}, {
  city: '无锡',
  type: '米面',
  value: 9000
}, {
  city: '无锡',
  type: '特产零食',
  value: 10000
}, {
  city: '无锡',
  type: '茶叶',
  value: 6000
}, {
  city: '杭州',
  type: '水果',
  value: 9000
}, {
  city: '杭州',
  type: '米面',
  value: 8500
}, {
  city: '杭州',
  type: '特产零食',
  value: 10000
}, {
  city: '杭州',
  type: '茶叶',
  value: 6000
}, {
  city: '北京',
  type: '水果',
  value: 17000
}, {
  city: '北京',
  type: '米面',
  value: 6000
}, {
  city: '北京',
  type: '特产零食',
  value: 7000
}, {
  city: '北京',
  type: '茶叶',
  value: 10000
}, {
  city: '上海',
  type: '水果',
  value: 18000
}, {
  city: '上海',
  type: '米面',
  value: 11000
}, {
  city: '上海',
  type: '特产零食',
  value: 15000
}, {
  city: '上海',
  type: '茶叶',
  value: 14000
}];

const scale1 = [{
  dataKey: 'value',
  max: 20000,
  min: 0.0,
  nice: false,
  alias: '销售额（万）'
}];

const label1 = {
  textStyle: {
    fill: '#aaaaaa'
  }
}

const tickLine1 = {
  alignWithLabel: false,
  length: 0
}

const title1 = {
  offset: 30,
  textStyle: {
    fontSize: 14,
    fontWeight: 300
  }
}

const adjust1 = [{
  type: 'dodge',
  marginRatio: 0.3
}]

export default {
  name: 'home',
  data () {
    return {
      data,
      scale,
      height: 300,
      style,
      label,
      tickLine,
      labelFormat,
      title,
      lineStyle,
      pos1: ['椅子', 'min'],
      pos2: ['电话', 'min'],
      pos3: ['笔', 'min'],
      start1: ['30%', '100%'],
      end1: ['30%', '120%'],
      start2: ['60%', '100%'],
      end2: ['60%', '120%'],
      edgesData: [],
      nodesData: [],
      style,
      label,
      data1,
      scale1,
      label1,
      tickLine1,
      title1,
      adjust1
    };
  },
  mounted () {
    $.getJSON('/assets/data/relationship-with-weight.json', (sourceData) => {
      const dv = new DataSet.View().source(sourceData, {
        type: 'graph',
        edges: d => d.links,
      });
      dv.transform({
        type: 'diagram.arc',
        marginRatio: 0.5,
      });
      this.$data.edgesData = dv.edges;
      this.$data.nodesData = dv.nodes;
    });
  },
  computed: {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped>
.home-top {
  width: 100%;
  display: flex;
}

.home-top-left {
  display: flex;
  flex: 1;
}

.home-top-right {
  flex: 1;
}

.home-bottom {
  width: 100%;
  display: flex;
}

.home-bottom-left {
  flex: 1;
}

.home-bottom-right {
  display: flex;
  justify-content: space-around;

  flex: 1;
}
</style>
